<template>
	<view>
		<view>
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :start-date="currentDate"
				:end-date="dyjsrq" :selected="info.selected" 
				:showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>
		<view class="formBorder">
			<uni-forms class="form" ref="form" :rules="rules" :model="formData">
				<uni-forms-item label="维护日期" labelWidth="180rpx" name="bisWhfaHwrq">
					<view class="dateTags">
						<uni-tag class="dateTag" v-for="(item,index) in whrqs" :key="index" :text="item" type="primary" :circle="true" @click="delDate(item,index)"></uni-tag>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="服务时间" labelWidth="180rpx" name="bisWhfaStartTime">
					<view class="fwsj">
						<picker mode="time" :value="formData.bisWhfaStartTime"  @change="bindStartTimeChange">
							<uni-easyinput type="text" disabled v-model="formData.bisWhfaStartTime" placeholder="选择开始时间" />
						</picker>
						<text style="padding: 0px 10px;">-</text>
						<picker mode="time" :value="formData.bisWhfaEndTime" @change="bindEndTimeChange">
							<uni-easyinput type="text" disabled v-model="formData.bisWhfaEndTime" placeholder="选择结束时间" />
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="服务类型" labelWidth="180rpx" name="bisWhfaFwlx">
					<uni-data-checkbox mode="tag" v-model="formData.bisWhfaFwlx" :localdata="fwlx" @change="fwlxChange"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="服务项目" labelWidth="180rpx" name="whfaFfxesChoose">
					<view class="" v-if="!formData.bisWhfaFwlx">请选择服务类型</view>
					<uni-data-checkbox mode="tag" multiple v-model="formData.whfaFfxesChoose" :localdata="liveProjectArr" @change="changeFwxm"></uni-data-checkbox>
					<!-- <uni-list>
						<uni-list-item v-for="(item,index) in formData.whfaFfxesChoose" :key="item.bisWhfaDzid" :title="item.bisWhfaFfxFwmc" clickable>
							<template v-slot:header>
								<view class="fwxmIconView" @click="deleteFwxm(formData.whfaFfxesChoose,index)"><uni-icons type="clear" size="44rpx" color="#e43d33"></uni-icons></view>
							</template>
							<template v-slot:footer>
								<view class="fwxmIconView">
									<uni-number-box :min="1" :max="1" v-model="formData.whfaFfxesChoose[index].bisWhfaFfxSl" background="#2979FF" color="#fff" ></uni-number-box>
								</view>
							</template>
						</uni-list-item>
						<uni-list-item  title="添加项目" showExtraIcon="true" :extra-icon="{color: '#000000',size: '44rpx',type: 'plus'}" clickable @click="addWhfaFfxes"></uni-list-item>
					</uni-list> -->
				</uni-forms-item>
				<uni-forms-item label="服务时长(分钟)" labelWidth="180rpx">
					<uni-easyinput type="text" disabled v-model="fwsc" placeholder="请选择服务项目" />
				</uni-forms-item>
				<button class="subBtn" @click="submitForm">保存</button>
				<!-- <uni-data-picker ref="pickerProject" :localdata="liveProjectArr" popup-title="请选择项目" v-show="showPickerProject" @popupclosed="onClosePickerProject" @change="changePickerProject"></uni-data-picker> -->
			</uni-forms>
		</view>
	</view>
</template>

<script lang="ts">
	import { route,routeMixin } from "@/route/Route"
	import { planService } from "@/service/PlanService"
	
	export default {
		mixins: [routeMixin],
		data() {
			return {
				showPickerProject:false,
				signedData: {},
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				currentDate: "",
				dyjsrq: "",
				dykkrq: "",
				whrqs:[],
				formData:{
					bisWhfaEndTime: "", 
					bisWhfaHwrq: "", 
					bisWhfaStartTime: "", 
					bisWhfaZhsqId: 0, 
					bz: "", 
					bisWhfaFwlx: "",
					whfaFfxesChoose: [],
					whfaFfxes: []
				},
				fwxm:[],
				fwlx:[],
				fwsc: 0,
				scFlag: false,
				liveProjectArr: [],
				rules: {
					// bisWhfaHwrq: {
					// 	rules:[
					// 		{
					// 			required: true,
					// 			errorMessage: '请选择日期',
					// 		},
					// 	],
					// 	label:'日期'
					// },
					bisWhfaStartTime: {
						rules:[
							{
								required: true,
								errorMessage: '请选择开始时间',
							}
						],
						label:'开始时间'
					},
					bisWhfaEndTime: {
						rules:[
							{
								required: true,
								errorMessage: '请选择结束时间',
							}
						],
						label:'结束时间'
					},
					bisWhfaFwlx: {
						rules:[
							{
								required: true,
								errorMessage: '请选择服务类型',
							}
						],
						label:'服务类型'
					},
					whfaFfxesChoose: {
						rules:[
							{
								required: true,
								errorMessage: '请选择服务项目',
							}
						],
						label:'择服务项目'
					}
				},
			}
		},
		watch:{
			routeParameter(newData, oldData) {
				this.formData.bisWhfaZhsqId = this.signedData.zhsq.bisZhsqId
				console.log(newData)
				planService.queryDyqx({id: this.signedData.zhsq.bisZhsqId},(res)=>{
					this.currentDate = res.currentDate
					// this.formData.bisWhfaHwrq = res.currentDate
					this.dyjsrq = res.dyjsrq
					this.dykkrq = res.dykkrq
					
					this.getFwfaList('')
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "新增维护方案"
			})
			planService.fwxm((res)=>{
				console.log(res)
				this.fwxm = res
				for(let type of this.fwxm){
					// this.fwlx = [...this.fwlx,{text: type.fwlxname,value:type.fwlxcode}]
					let children = []
					for(let xm of type.fwxmList){
						xm.text = xm.bisYmkdzId
						xm.value = xm.bisYmkdzMc
						children.push({text:xm.bisYmkdzMc,value:xm.bisYmkdzId})
					}
					this.fwlx = [...this.fwlx,{text: type.fwlxname,value:type.fwlxcode,children:children}]
					// this.liveProjectArr=[...this.liveProjectArr,{text:type.fwlxname,value:type.fwlxcode,children:children}]
				}
			})
		},
		methods: {
			routeParameterEvent(data) {
				this.signedData = data
				this.routeParameter = data
				console.log(data)
			},
			toSignedList(){
				route.navigateTo({name:'plan'})
			},
			formDataRest(){
				this.formData = {
					bisWhfaEndTime: "", 
					bisWhfaHwrq: [], 
					bisWhfaStartTime: "", 
					bisWhfaZhsqId: this.formData.bisWhfaZhsqId, 
					bz: "", 
					bisWhfaFwlx: "",
					whfaFfxesChoose: [],
					whfaFfxes: []
				}
				this.liveProjectArr = []
			},
			change(e) {
				// this.formDataRest()
				for(let item of this.info.selected){
					if(item.date === e.fulldate){
						uni.showToast({
							title: "该日期已维护",
							duration: 2000,
							icon:'error'
						});
						return
					}
						
				}
				for(let item of this.whrqs){
					if(item === e.fulldate){
						return
					}
						
				}
				if(this.whrqs.length >= 8){
					uni.showToast({
						title: "最多选8天",
						duration: 2000,
						icon:'error'
					});
					return
				}
				if(e.fulldate){
					this.whrqs = [...this.whrqs,e.fulldate]
				}
				
				// for(let select of this.info.selected){
				// 	if(e.fulldate === select.date){
				// 		this.formData = select.data
				// 	}
				// }
				// if(this.formData.bisWhfaFwlx == '94'){
				// 	this.formData.bisWhfaFwlx = '01'
				// }
				// if(this.formData.bisWhfaFwlx == '95'){
				// 	this.formData.bisWhfaFwlx = '04'
				// }
				// console.log(this.fwlx)
				// for(let fwlx of this.fwlx){
				// 	if(fwlx.value === this.formData.bisWhfaFwlx){
				// 		this.liveProjectArr = fwlx.children
				// 	}
				// }
					
				// this.formData.whfaFfxesChoose = []
				// for(let item of this.formData.whfaFfxes){
				// 	this.formData.whfaFfxesChoose= [...this.formData.whfaFfxesChoose,item.bisWhfaDzid]
				// }
				// this.changeFwxm()
				// console.log(this.formData)
			},
			delDate(item,index){
				console.log(item)
				let _this = this
				uni.showModal({
					title: '确认',
					content: '是否确认移除'+item+"",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确认');
							_this.whrqs.splice(index, 1); 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			monthSwitch(e) {
				this.whrqs = []
				console.log('monthSwitchs 返回:', e)
				let year = e.year
				let month = e.month
				if(month < 10){
					month = '0' + month
				}
				this.getFwfaList(year+'-'+month)
			},
			bindStartTimeChange(e) {
				this.formData.bisWhfaStartTime = e.detail.value
				let startTime =  new Date(this.currentDate+" "+this.formData.bisWhfaStartTime+":00")
				let endHours = startTime.getHours() + 2
				if(endHours < 10){
					endHours = "0"+endHours
				}
				let endMinutes = startTime.getMinutes()
				if(endMinutes < 10){
					endMinutes = "0"+endMinutes
				}
				this.formData.bisWhfaEndTime = endHours+":"+endMinutes


			},
			bindEndTimeChange(e) {
				this.formData.bisWhfaEndTime = e.detail.value
			},
			translateDictFwlx(code){
				let value = ""
				switch(code){
					case "94" :
						value = "生活服务"
						break;
					case "95" :
						value = "医疗护理"
						break;
					default:
						
				}
				return value;
			},
			submitForm(){
				console.log(this.formData)
				// {bisWhfaDzid:temp.value,bisWhfaFfxSl:"1",bisWhfaFfxFwmc:temp.text}
				if(this.whrqs.length === 0){
					uni.showToast({
						title: "请选择维护日期",
						duration: 2000,
						icon:'error'
					});
					return
				}
				
				  // 判断是否超过120分钟
				  if (this.scFlag) {
					uni.showModal({
						title: '提示',
						content: '服务时长不允许超过120分钟',
						showCancel:false,
						success: function (res) {
							
						}})
					return
				  }
				let shhlDays = 0
				let ylhlDays = 0
				for(let sel of this.info.selected){
					if(sel.data.bisWhfaFwlx === '94' || sel.data.bisWhfaFwlx === '01' ){
						shhlDays = shhlDays+1
					}
					if(sel.data.bisWhfaFwlx === '95' || sel.data.bisWhfaFwlx === '04' ){
						ylhlDays = ylhlDays+1
					}
						
				}
				if(this.formData.bisWhfaFwlx === '01'){
					let days = shhlDays + this.whrqs.length
					if(days > 8){
						uni.showModal({
							title: '提示',
							content: '生活照料每个月最多8天',
							showCancel:false,
							success: function (res) {
								
							}})
						return
					}
				}
				if(this.formData.bisWhfaFwlx === '04'){
					let days = ylhlDays + this.whrqs.length
					if(days > 4){
						uni.showModal({
							title: '提示',
							content: '医疗护理每个月最多4天',
							showCancel:false,
							success: function (res) {
								
							}})
						return
					}
				}
				let _this = this
				this.$refs.form.validate().then(res=>{
					uni.showModal({
						title: '提示',
						content: '是否确认提交',
						success: function (res) {
							if (res.confirm) {
								_this.formData.whfaFfxes = []
								for(let item of _this.formData.whfaFfxesChoose){
									_this.formData.whfaFfxes.push({bisWhfaDzid:item})
								}
								console.log(_this.formData)
								let whrqs = _this.whrqs.toString();
								planService.add(_this.formData,{whrqs: whrqs},(resp)=>{
									console.log(resp)
									for(let item of resp){
										
										_this.info.selected = [..._this.info.selected,{
											date: item.bisWhfaHwrq,
											info: _this.translateDictFwlx(item.bisWhfaFwlx).substring(0,2),
											data: item
										}]
										_this.whrqs = []
										_this.sendRouteParameter('planList',1,{status:1})
										route.goBack()
										return
									}
								})
							} else if (res.cancel) {
							}
						}
					});
				}).catch(err =>{
					// console.log('表单错误信息：', err);
				})
				
				
			},
			// addWhfaFfxes(){
			// 	this.showPickerProject = true
			// 	this.$refs.pickerProject.show()
			// },
			// onClosePickerProject(){
			// 	this.showPickerProject = false
			// },
			// changePickerProject(e){
			// 	console.log(e)
			// 	let temp = e.detail.value[e.detail.value.length-1]
			// 	for(let fwxm of this.formData.whfaFfxesChoose){
			// 		if(fwxm.bisWhfaDzid === temp.value){
			// 			console.log('已存在项目')
			// 			uni.showToast({
			// 				title: '已存在项目',
			// 				icon: 'error',
			// 				duration: 2000
			// 			});
			// 			return
			// 		}
			// 	}
			// 	this.formData.whfaFfxesChoose = [...this.formData.whfaFfxesChoose,{bisWhfaDzid:temp.value,bisWhfaFfxSl:"1",bisWhfaFfxFwmc:temp.text}]
			// 	console.log(this.formData.whfaFfxesChoose)
			// },
			getFwfaList(bisWhfaHwrq){
				
				planService.list({bisWhfaZhsqId:this.signedData.zhsq.bisZhsqId,bisWhfaHwrq:bisWhfaHwrq},(res)=>{
					
					this.info.selected = []
					for(let fwData of res){
						this.info.selected = [...this.info.selected,{
							date: fwData.bisWhfaHwrq,
							info: this.translateDictFwlx(fwData.bisWhfaFwlx).substring(0,2),
							data: fwData
						}]
					}
					if(bisWhfaHwrq === ''){
						
						this.change({fulldate:bisWhfaHwrq})
					}
				})
			},
			deleteFwxm(array,index){
				array.splice(index, 1); 
			},
			fwlxChange(e){
				
				console.log(e);
				// console.log(this.formData.bisWhfaFwlx);
				// console.log(e.detail.value);
				// console.log(this.formData.bisWhfaFwlx !== e.detail.value);
				// if(this.formData.bisWhfaFwlx !== e.detail.value || this.liveProjectArr.length === 0){
					this.liveProjectArr = []
					this.formData.whfaFfxesChoose = []
					this.liveProjectArr=e.detail.data.children
				// }
					
				// this.liveProjectArr=e.detail.data.children
				console.log(this.liveProjectArr);
				
			},
			changeFwxm(){
				console.log(this.formData.whfaFfxesChoose)
				console.log(this.fwxm)
				this.fwsc = 0
				for(let item of this.fwxm){
					if(item.fwlxcode === this.formData.bisWhfaFwlx){
						for(let item2 of item.fwxmList){
							if(this.formData.whfaFfxesChoose.indexOf(item2.bisYmkdzId) > -1){
								this.fwsc = this.fwsc + (item2.bisYmkdzFwsc - 0)
								if (this.fwsc > 120) {
									this.scFlag = true
									uni.showModal({
										title: '提示',
										content: '服务时长不允许超过120分钟',
										showCancel:false,
										success: function (res) {
											
										}})
										break
								  } else {
									this.scFlag = false
								  }
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.formBorder{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: $uni-bg-color-grey;
	background: white;
	margin: 40rpx;
}
.form{
}
.subBtn{
	background-color: $uni-color-primary;
	color: $uni-text-color-inverse;
}
.fwsj{
	display: flex;
	justify-content: center;
	align-items: center;
}
.fwxmIconView{	
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.dateTags{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.dateTag{
	margin: 10rpx;
}
</style>
